<template>
  <div style="display: flex;padding: 15px">
    <el-form :model="form" label-width="auto" style="width: 300px">
      <el-form-item label="">
        <el-input placeholder="输入具体信息" v-model="form.queryString"  />
      </el-form-item>
    </el-form>
    <div style="padding-left: 3px">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="用于查询相关数据"
        placement="bottom"
      >
        <el-button type="primary" icon="Search" @click="getRoleTree" round>查询</el-button>
      </el-tooltip>

      <el-tooltip
        class="box-item"
        effect="dark"
        content="可以在该表中添加数据"
        placement="bottom"
      >
        <el-button type="success" icon="Plus" round>添加</el-button>
      </el-tooltip>
    </div>
  </div>
  <el-table
    :data="tableData"
    :tree-props="treeProps"
    row-key="id"
  >
<!--     default-expand-all 默认展开所有-->
    <el-table-column type="selection" width="35" :selectable="selectable" />
    <el-table-column prop="date" label="id" width="180" />
    <el-table-column prop="name" label="角色名称" width="180" />
    <el-table-column prop="address" label="描述"  width="300" />
    <el-table-column prop="address" label="创建时间"  width="280" />
    <el-table-column prop="address" label="更新时间"  width="280" />
    <el-table-column fixed="right" label="操作数据表" min-width="230">
      <template #default="scope">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="删除该表中该行数据"
          placement="left-start"
        >
          <el-button link type="danger" icon="Delete"  @click="" />
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="点击可以编辑该行的数据"
          placement="right-start"
        >
          <el-button link type="primary" @click="" icon="EditPen" />
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {roleTree} from "@/api/api"
import {reactive, ref} from 'vue'

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const treeProps = reactive({
  checkStrictly: false,
})
const form = ref({
  queryString:""
})
const selectable = (row: User) => ![1, 31].includes(row.id)

const tableData = ref()

function getRoleTree(){
  roleTree().then((res:any) =>{
    console.log(res.data)
    tableData.value = res.data
  })
}

getRoleTree()
</script>

<style scoped>

</style>
